<template >
  <div>
    <div>
      <Nav></Nav>
      <!-- 标题 -->
      <v-title
        v-if="gameGoodsInfo == null || Object.keys(gameGoodsInfo).length == 0"
      >
        暂时不存在该游戏商品~
      </v-title>
      <v-title v-else-if="gameGoodsInfo != null">
        {{ gameGoodsInfo.name }}
      </v-title>
      <!-- 搜不到该游戏 -->
      <div
        v-if="gameGoodsInfo == null || Object.keys(gameGoodsInfo).length == 0"
      >
        <el-result title="找不到该游戏商品" subTitle="抱歉~该游戏商品暂时下架~请耐心等待该游戏商品上架吧~">
          <template slot="icon">
            <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px"/>
          </template>
          <template slot="extra">
            <router-link to='/gameGoods'><el-button type="primary" size="medium">返回</el-button></router-link>
          </template>
        </el-result>
      </div>
      <!-- 搜到该游戏信息页面处理 -->
      <div v-else-if="gameGoodsInfo != null">
        <br />
        <el-row>
          <el-col :span="10" :offset="4">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" replace>
              <el-breadcrumb-item :to="`/gameGoods`" replace
                >游戏商城</el-breadcrumb-item
              >
              <el-breadcrumb-item
                :to="`/gameGoodsDetail/${gameGoodsId}`"
                replace
                >{{ gameGoodsInfo.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
        <!-- 标题 -->
        <el-row>
          <el-col :span="10" :offset="4">
            <h2>
              {{ gameGoodsInfo.name }}
            </h2>
          </el-col>
        </el-row>
        <br />

        <el-row>
          <!-- 图片相关 左边 -->
          <el-col :span="10" :offset="4">
            <div>
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item
                  v-for="item in gameGoodsInfo.picUrl"
                  :key="item"
                >
                  <el-image :src="item" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <br />
            <div>
              <span v-for="item in gameGoodsInfo.picUrl">
                <el-image
                  style="width: 106px; height: 106px"
                  :src="item"
                  :preview-src-list="gameGoodsInfo.picUrl"
                  lazy
                />
              </span>
            </div>
          </el-col>

          <el-col :span="5" :offset="2">
            <el-row>
              <el-image
                style="width: 100%; height: 188px"
                :src="gameGoodsInfo.mainPicUrl"
              />
            </el-row>
            <br />
            <el-row>
              <el-col :md="8"><span class="rightTitle">标签</span></el-col>
              <el-col :md="16">
                <span
                  v-for="(item, index) in gameGoodsInfo.tag"
                  style="width: 33%"
                >
                  <el-tag type="info">{{ item }}</el-tag>
                  <span v-if="index + 1 < gameGoodsInfo.tag.length"
                    >&nbsp;</span
                  >
                </span>
              </el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :md="8"><span class="rightTitle">开发商</span></el-col>
              <el-col :md="16"
                ><span class="rightContent">{{
                  gameGoodsInfo.developCompany
                }}</span></el-col
              >
            </el-row>
            <br />
            <el-row>
              <el-col :md="8"
                ><span class="rightTitle">创建商品时间</span></el-col
              >
              <el-col :md="16"
                ><span class="rightContent">{{
                  gameGoodsInfo.createTime
                }}</span></el-col
              >
            </el-row>
            <br />
            <el-row>
              <el-col :md="8"
                ><span class="rightTitle">最后上架时间</span></el-col
              >
              <el-col :md="16"
                ><span class="rightContent">{{
                  gameGoodsInfo.updateTime
                }}</span></el-col
              >
            </el-row>
            <br />
            <el-row>
              <el-col :md="8"><span class="rightTitle">价格</span></el-col>
              <el-col :md="16"
                ><span class="rightContent price"
                  >￥{{ gameGoodsInfo.price }}</span
                ></el-col
              >
            </el-row>
            <br />
            <el-row>
              <el-col :md="8"><span class="rightTitle">库存</span></el-col>
              <el-col :md="16"
                ><span class="rightContent bold">{{
                  gameGoodsInfo.num
                }}</span></el-col
              >
            </el-row>
            <br />
            <el-row>
              <el-col :md="24">
                <el-button type="danger" round @click="addCart"
                  >加入购物车~</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 额外信息 -->
        <el-row
          v-if="gameGoodsInfo.content != null && gameGoodsInfo.content != ''"
        >
          <el-row>
            <el-col :span="10" :offset="4">
              <h3>游戏介绍</h3>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="4">
              {{ gameGoodsInfo.content }}
            </el-col>
          </el-row>
        </el-row>

        <br />
        <el-row v-if="gameGoodsInfo.picUrl.length > 0">
          <el-row v-for="pic in gameGoodsInfo.picUrl">
            <el-col :span="10" :offset="4">
              <el-image :src="pic"></el-image>
            </el-col>
          </el-row>
        </el-row>
        <br />
        <el-divider>亲~已经看到底了吖~</el-divider>
        <br />

        <el-backtop />
      </div>
    </div>
  </div>
</template>
  
<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getGameGoodsDetail, updateCartInfo } from "@/api/index";
import { mapState, mapGetters } from "vuex";
export default {
  name: "",
  components: {
    Nav,
    VTitle,
  },
  mounted() {
    this.getGameGoodsInfoData(this.gameGoodsId);
  },
  data() {
    return {
      gameGoodsId: this.$route.params.gameGoodsId,
      gameGoodsInfo: {},
    };
  },
  computed: {
    ...mapGetters(["isAuthorized"]),
    ...mapState(["user"]),
  },
  methods: {
    async getGameGoodsInfoData(gameGoodsId) {
      let that = this;
      await getGameGoodsDetail(gameGoodsId).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.gameGoodsInfo = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async addCart() {
      let that = this;
      if (!this.isAuthorized) {
        // 没有权限需要登录
        this.$message.error("若加入购物车需要先登录吖~");
        this.$router.push(
          `/login?redirect=/gameGoodsDetail/${that.gameGoodsInfo.id}`
        );
        return;
      }
      let data = {
        gameGoodsId: that.gameGoodsInfo.id,
        userId: that.user.userId,
        num: 1,
        type: 1,
      };
      await updateCartInfo(data).then((res) => {
        if (res.code == "200") {
          this.$message.success("添加到购物车成功~在购物车处等着您吖~");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>
  
<style lang="less" scoped>
.rightTitle {
  width: 100%;
  float: left;
  font-size: 12px;
  line-height: 20px;
  color: #a5aab8;
  top: 0;
  left: 0;
}

.rightContent {
  font-size: 12px;
  line-height: 20px;
  color: #000;
  margin: 0 10px 0 0;
  display: inline;
}

.el-tag {
  width: 30%;
  margin-bottom: 10px;
}

.goTop {
  height: 100vh;
  overflow-x: hidden;
}

.price {
  color: red;
  font-weight: bold;
}

.bold {
  font-weight: bold;
}
</style>
  